<template>
    <div>
        <h3>门店显示</h3>
        {{ abc.str }}
        {{ abc.userInfo }}
        姓名:<input type="text" v-model="info.username">
        手机号:<input type="text" v-model="info.tel">
        会员等级:
        <select v-model="info.levelId">
            <option value="">请选择</option>
            <option :value="item.id" v-for="item in lavelist">{{ item.levelName }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-primary" @click="getMemberList">
        <input type="button" value="重置" class="btn btn-danger" @click="reset">
        <h3>会员列表</h3>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td><input type="checkbox" v-model="checked" @change="checkAll"></td>
                    <td>序号</td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>手机号</td>
                    <td>证件类型</td>
                    <td>证件号码</td>
                    <td>出生日期</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>金额</td>
                    <td>爱好</td>
                    <td>会员等级</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list" :key="item.mId">
                    <td><input type="checkbox" v-model="ids" :value="item.mId"></td>
                    <td>{{ item.mId }}</td>
                    <td>{{ item.memberCode }}</td>
                    <td>{{ item.userName }}</td>
                    <td>{{ item.tel.substr(0, 3) + '****' + item.tel.substr(7, 4) }}</td>
                    <td>{{ item.cardType }}</td>
                    <td>{{ item.card }}</td>
                    <td>{{ moment(item.birthDay).format('YYYY-MM-DD') }}</td>
                    <td>{{ item.gender == 1 ? '男' : '女' }}</td>
                    <td>{{ item.state == true ? "启用" : "禁用" }}</td>
                    <td>{{ item.money }}</td>
                    <td>{{ item.likes }}</td>
                    <td>{{ item.levelName }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.mId)">
                        <input type="button" value="修改" class="btn btn-warning" @click="update(item.mId)">
                        <input type="button" value="详情" class="btn btn-warning" @click="Find(item.mId)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import moment from 'moment';
//导入
import { useUserStore } from '@/stores/User';
//创建store对象
const abc = useUserStore();
import { useRouter } from 'vue-router';
const router = useRouter();

onMounted(() => {
    //直接发送网络请求获取列表
    getMemberList();
    //获取会员等级列表
    getLeveList();
})
let checked: any = ref(false);
let ids: any = ref([]);
const checkAll = () => {
    if (checked.value) {
        ids.value = list.value.map((item: any) => {
            return item.mId
        })
    }
    else {
        ids.value = [];
    }
}
//反填
const Find = (id: any) => {
    router.push({
        path: '/memberFind',
        query: {
            id: id,
        },
    })
}
//修改
//第一步跳转 传递参数   路由传参
//根据路径创建视图     配置视图规则   视图的内容为添加页面的内容
const update = (id: any) => {
    router.push({
        path: '/memberUpdate',
        query: {
            id: id,
        },
    });
}
//删除  //传参: 函数传参
const del = (mId: any) => {
    //1.友好提示
    var f = confirm("请问您确定删除吗?")
    if (f) {
        axios({
            url: '/api/Members/DelMemberItem',
            method: 'delete',
            params: {
                //前面id是后端需要的
                //后面id是前面传来的
                id: mId
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功');
                    getMemberList();
                }
                else {
                    alert('删除失败');
                    return
                }
            })
            .catch((err) => {
                console.log(err);
            })
    }
    //2.发送请求删除操作
    //3.更新页面
}
//重置
const reset = () => {
    info.username = '';
    info.tel = '';
    info.levelId = '';
    getMemberList();
};
let lavelist: any = ref([]);
//获取会员等级列表
const getLeveList = () => {
    axios({
        url: '/api/Members/GetMemberLevel',
        method: 'get',
    })
        .then((res) => {
            console.log(res);
            lavelist.value = res.data;
        })
        .catch((err) => {
            console.log(err);
        })
};
//声明变量向后端传递参数
let info: any = reactive({
    username: '',
    tel: '',
    levelId: '',
})
//声明变量存储后端返回的数据
let list: any = ref([]);
//获取会员列表  传参 网络请求传参
const getMemberList = () => {
    axios({
        url: 'api/Members/GetMemberList',
        method: 'get',
        params: info
    })
        .then((res) => {
            console.log(res);
            list.value = res.data;
        })
        .catch((err) => {
            console.log(err);
        })
}
</script>

<style scoped>
input[type='button'] {
    margin: 0 5px;
}
</style>